<template>
    <div>

    <el-dropdown @command="handleCommand">
    <span class="avatar-dropdown">
<!--      <el-avatar class="user-avatar" :src="avatar"></el-avatar>-->
        <img class="user-avatar" :src="require('@/assets/logo.png')" alt=""/>
      <div class="user-name">
        {{ username }}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </div>
    </span>
        <edit ref="edit" @fetch-data=""></edit>
        <el-dropdown-menu slot="dropdown">
            <!--<el-dropdown-item command="personalCenter">个人中心</el-dropdown-item>-->
            <el-dropdown-item command="gitee">密码修改</el-dropdown-item>
            <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
        </el-dropdown-menu>
    </el-dropdown>
      <div class="info-tips-con" v-show="showTips"><!--控制showTips为false 即关闭此提醒框-->
        <div class="info-tips-head">
          <span class="text-t">任务通知</span>
          <span class="play-t"><i @click="showDetail()" :class="[isShowDetail ? 'el-icon-arrow-down' : 'el-icon-arrow-up']"></i></span>
        </div>
        <div class="info-tips-body" v-show="isShowDetail">
          <ul>
            <li v-for="(item,index) in events" :key="index" ref="contlist" :class="{'animate-up':animateUp}" @mouseenter="Stop()" @mouseleave="Up()">
              <p class="info-tips-type">{{ item.type }} <i v-show="item.is_out === 1">(已超时)</i> <span>{{ item.warning_order_publish_time }}</span></p>
              <p class="info-tips-des" @click="showOne(item)">{{ item.warning_order_name }}</p>
            </li>
          </ul>

        </div>
      </div>

    </div>


</template>

<script>
    import Edit from './components/Edit'
    import {mapActions, mapGetters} from 'vuex'
    import {recordRoute} from '@/config'
    import {getDeptList} from '@/api/warningOrderLeader'
    import watermark from "@/utils/waterMarker";

    export default {
        name: 'VabAvatar',
        components: {Edit},
        data() {
          return {
            showTips: true,
            isShowDetail: true,
            // 控制动画
            animateUp: false,
            // 计时器
            intNum: null,
            // 内容
            events: [
            ],
            timer : '',


          }
        },
      created() {
          this.getNotice();
      },
      mounted() {
        const timer = setInterval(() => {   // 在页面加载后开启一个定时器
          this.getNotice();
          console.log("定时器调用");
        }, 60000)
        this.$once('hook:beforeDestroy', () => {   //再通过事件监听，监听到 组件销毁 后，再执行关闭计时器。
          clearInterval(timer);
        })
      },
      computed: {
            ...mapGetters({
                avatar: 'user/avatar',
                username: 'user/username',
            }),
        },
        methods: {
            ...mapActions('tabsBar', ['delAllVisitedRoutes']),
            handleCommand(command) {
                switch (command) {
                    case 'logout':
                        this.logout()
                        break
                    case 'personalCenter':
                        this.personalCenter()
                        break
                    case 'gitee':
                        // window.open('https://gitee.com/chu1204505056/vue-admin-beautiful')
                        this.$refs['edit'].showEdit()
                        break
                }
            },
            personalCenter() {
                this.$router.push('/personalCenter/index')
            },
            logout() {
                this.$baseConfirm(
                    '您确定要退出' + this.$baseTitle + '吗?',
                    null,
                    async () => {
                        await this.$store.dispatch('user/logout')
                        localStorage.removeItem("loginUserName");

                        if (recordRoute) {
                            this.delAllVisitedRoutes() //清除tabs
                            this.$store.dispatch('tabsBar/delAllVisitedRoutes', this.$route)

                            // const fullPath = this.$route.fullPath
                            // this.$router.push(`/login?redirect=${fullPath}`)

                          const options ={
                            content: ''
                          }
                          watermark(options)

                            this.$router.push('/login')
                            this.reload()
                        } else {
                            this.$router.push('/login')
                            this.reload()
                        }

                    }
                )
            },

          showDetail() {
              this.isShowDetail = !this.isShowDetail;
          },
          ScrollUp() {
              this.intNum = setInterval(() => {
                  this.animateUp = true// 向上滚动的时候需要添加css3过渡动画
                  setTimeout(() => {
                      this.events.push(this.events[0])// 将数组的第一个元素添加到数组的
                      this.events.shift() // 删除数组的第一个元素
                      this.animateUp = false
                  }, 1000)
              }, 1500)
          },
          // 鼠标移上去停止
          Stop() {
              clearInterval(this.intNum)
          },
          // 鼠标离开继续滚动
          Up() {
            if (this.events.length > 1) {
              this.ScrollUp()
            }

          },
          // start(){
          //   setInterval(function(){
          //   console.log('间隔60秒执行一次')
          //     this.getNotice();
          //  },60000)
          // },


          getNotice() {
            getDeptList().then((res) => {
              console.log(res);
              var list   = res.data
              for (var i = 0; i <list.length; i++) {
                if (list[i].dept_mine === 1 && list[i].dept_discriminate === 0 ) {
                  list[i].type = "警令:我的协同";
                }

                if (list[i].dept_mine === 1 && list[i].dept_discriminate === 1 ) {
                  list[i].type = "警情:我的协同";
                }

                if (list[i].dept_mine === 0 && list[i].dept_discriminate === 0 ) {
                  list[i].type = "警令:部门协同";
                }

                if (list[i].dept_mine === 0 && list[i].dept_discriminate === 1 ) {
                  list[i].type = "警情:部门协同";
                }

              }
              this.events = list;

              if ( this.events.length == 0){
                this.showTips =false;
                this.isShowDetail = false;
              }else {
                this.showTips =true;
                this.isShowDetail = true;
                clearInterval(this.intNum);
                if (this.events.length > 1) {
                  this.ScrollUp();
                }
              }
            })
          },
          showOne(item){
            console.log("item: " ,item)
            var id = item.id;
            if (item.dept_mine == 1 && item.dept_discriminate == 0) {
              //跳转我的协同 警令
              this.$router.push({
                path: '/myxt/myxt', query: {name: item.warning_order_name,dept_discriminate : 0}
              })
            }
            if (item.dept_mine == 1 && item.dept_discriminate == 1) {
              //跳转我的协同 警情
              this.$router.push({
                path: '/myxt/myxt', query: {name: item.warning_order_name,dept_discriminate : 1}
              })

            }
            if (item.dept_mine == 0 && item.dept_discriminate == 0) {
              this.$router.push({
                path: '/xietongfk/xtfklist', query: {name: item.warning_order_name, date:new Date().getTime()}
              })
            }
            if (item.dept_mine == 0 && item.dept_discriminate == 1) {
              //跳转警情协同反馈
              this.$router.push({
                path: '/jqxietongfk/xtfklist', query: {name: item.warning_order_name}
              })
            }

          }

        },

    }
</script>
<style lang="scss" scoped>
    .avatar-dropdown {
        display: flex;
        align-content: center;
        align-items: center;
        justify-content: center;
        justify-items: center;
        height: 50px;
        padding: 0;

        .user-avatar {
            width: 40px;
            height: 40px;
            cursor: pointer;
            border-radius: 50%;
        }

        .user-name {
            position: relative;
            margin-left: 5px;
            margin-left: 5px;
            cursor: pointer;
        }
    }
    .animate-up {
      transition: all 0.2s ease-in-out;
      transform: translateY(-60px);
    }
    .info-tips-con{
      position: fixed;
      bottom: 0;
      right: 40px;
      width: 360px;
      z-index: 999;
      box-shadow: 0 0 30px 0 rgba(115, 77, 191, 0.2);
    }
    .info-tips-head{
      width: 100%;
      padding: 0 10px 0 14px;
      height: 36px;
      line-height: 36px;
      font-size: 14px;
      color: #fff;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
      background-color: rgb(50, 65, 87);
      box-sizing: border-box;
    }
    .info-tips-head .text-t{
      display: inline-block;
      width: 200px;
      vertical-align: middle;
    }
    .info-tips-head .play-t{
      display: inline-block;
      width: 120px;
      margin-left: 16px;
      text-align: right;
      vertical-align: middle;
    }
    .info-tips-head .play-t i{
      font-size: 16px;
      cursor: pointer;
    }
    .info-tips-body{
      padding: 14px 18px;
      height: 100px;
      font-size: 14px;
      overflow: hidden;
      background-color: #ffffff;
      transition: all .3s;
    }
    .info-tips-body ul{
      padding-inline-start: 0px;
    }
    .info-tips-body ul li{
      margin-bottom: 10px;
      border-bottom: 1px dashed #c8d2e1;
      cursor: pointer;
      list-style: none;
    }
    .info-tips-body ul li:hover,.info-tips-body ul li:hover .info-tips-type span{
      color: #409eff;
    }

    .info-tips-type{
      margin-bottom: 4px;
      color: #409eff;
      font-weight: bold;
    }
    .info-tips-type span{
      margin-left: 6px;
      font-size: 14px;
      color: #999;
      font-weight: normal;
    }
    .info-tips-type i{
      color: #dc3636;
      font-style: normal;
    }
    .info-tips-des{
      line-height: 22px;
      margin-bottom: 4px;
    }

</style>
